import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './notification.less';
import {VtxNotification} from '../components/vtxNotification';
import {Icon,Button} from 'antd';
function Notification() {
  function success(config){
    VtxNotification.success(config);
  }
  function error(config){
    VtxNotification.error(config);
  }
  function warning(config){
    VtxNotification.warn(config);
  }
  function info(config){
    VtxNotification.info(config);
  }
  function destroy(){//所有提示消失
    VtxNotification.destroy();
  }
  function config(){
    VtxNotification.config({
      placement: 'bottomRight',
      bottom: 50,
      duration: 3
    });
  }
  function close(){
    VtxNotification.close();
  }
  function open(config){
    VtxNotification.open(config);
  }
  return (
    <div className={styles.normal}>
      <ul>
        <li> 
          <p>成功、失败、警告、信息通知普通用法，不传任何参数。</p>
          <Button onClick={()=>success({})}>Success</Button>
          <Button onClick={()=>error({})}>Error</Button>
          <Button onClick={()=>warning({})}>Warning</Button>
          <Button type="primary" onClick={()=>info({})}>info</Button>
        </li>
        <li> 
          <p>自定义通知框自动关闭的延时，默认4.5s，取消自动关闭只要将该值设为 0 即可。</p>
          <Button type="primary" onClick={()=>open({
                message: '自己点击关闭',
                description: '详细信息',
                duration:0
              })}>Open the notification box</Button>
        </li><li> 
          <p>所有提示清除。</p>
          <Button onClick={destroy}>destroy</Button>
        </li><li> 
          <p>自定义全局通知的配置。点击该按钮之后再点击其他的通知信息之后，都在底部且3s自动消失</p>
          <Button onClick={()=>config()}>Config</Button>
        </li><li> 
          <p>关闭时触发的回调函数。</p>
          <Button onClick={()=>open({
              message: '关闭回调测试',
              description: '自定义通知内容',
              onClose:function(){alert('回调')}
            })}>onclose</Button>
        </li>
        <li> 
          <p>自定义通知,自定义Icon，自定义关闭按钮，5s自动关闭。</p>
          <Button onClick={()=>open({
                message: '自定义通知',
                description: '自定义通知内容',
                btn:<Button onClick={destroy}>自定义按钮</Button>,
                icon: <Icon type="smile-circle" style={{ color: '#108ee9' }} />,
                duration:25
              })}>open</Button>
        </li>
      </ul>
    </div>
  );
}

Notification.propTypes = {
};

export default connect()(Notification);
